<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物资查询</title>
    <link rel="stylesheet" href="./css/self.css">
    <style>
        #output_table {
            width: 100%;
            border-collapse: collapse;
        }
        
        #output_table tr {
            width: 100%;
            height: 30px;
            border: 1px solid black;
        }
        
        #output_table th,
        td {
            text-align: center;
            line-height: 100%;
        }
    </style>
</head>

<body>
    <div class="sidebar">

        <ol class="sidebar-box">
            <li>
                <h1 style="color: aqua;">test</h1>
            </li>
            <li class=""><img src="" alt="" class="siderbar-img"><a href="./index.html" class="sidebar-text">首页</a></li>
            <li class="sidebar-now"><img src="" alt="" class="siderbar-img"><a href="./warehouse-query.html" class="sidebar-text">物资查询</a></li>
            <li class=""><img src="" alt="" class="siderbar-img"><a href="./warehouse-change.html" class="sidebar-text">物资更改</a></li>
            <li class=""><img src="" alt="" class="siderbar-img"><a href="./warehouse-add.html" class="sidebar-text">入库操作</a></li>
            <li class=""><img src="" alt="" class="siderbar-img"><a href="./warehouse-out.html" class="sidebar-text">出库操作</a></li>
            <li class=""><img src="" alt="" class="siderbar-img"><a href="./warehouse-queryadd.html" class="sidebar-text">入库表单查询</a></li>
            <li class=""><img src="" alt="" class="siderbar-img"><a href="./warehouse-queryout.html" class=" sidebar-text ">出库表单查询</a></li>
        </ol>

    </div>
    <div class="head-box">
        <h1>欢迎来到仓库管理系统</h1>
    </div>
    <div class="main-box">
        <h1 style="text-align: center;font-size: 50px;color: cornflowerblue;">你好，超级管理员</h1>
        <div style="height: auto;margin: 50px;border: 1px solid white;background-color: rgba(255, 255, 255, 0.493);">
            <h1>管理中心</h1>

            <iframe src="" frameborder="0" name="iframeName" style="display: none;"></iframe>
            <div class="message">
                <span>
                    <ol>
                    <li>
                    <label for="gid_input" class="name_input">商品id</label>
                    <input type="text" name="gid_input" id="gid_input" placeholder="001">
                </li>
                <li>
                    <label for="gname_input" class="name_input">商品名称</label>
                    <input type="text" name="gname_input" id="gname_input">
                </li>
                </ol>
                </span>
                <span>
                    <label for="warehouse_id" class="name_input">仓库名称(store1)</label>
                    <input type="text" name="warehouse_id" id="warehouse_id">
                </span>
                <span>
                    <button id="submit_button" onclick="query_output_byid()">查询</button>

                    <button id="submit_button" onclick="query_output_everything()">查询所有</button>
                </span>

            </div>
            <div id="output">

            </div>
        </div>
</body>
<script type="text/javascript" src="./node_modules/jquery/dist/jquery.js" charset="UTF-8"></script>
<script>
    function pop_add_onclick() {
        alert('hello');

    }
    //按gid查询
    function query_output_byid() {
        var input_gid = document.getElementById('gid_input').value;
        var input_gname = document.getElementById('gname_input').value;
        var input_warehouseid = document.getElementById('warehouse_id').value;
        console.log(input_gid + input_gname + input_warehouseid);
        if (input_gid != "" && input_warehouseid != "") {
            url0 = 'http://localhost:80/index.php/Mysql/mysql_get_bygid' + '/input_table_name/' + input_warehouseid + '/input_gid/' + input_gid;
        } else if (input_gname != "" && input_warehouseid != "") {
            url0 = 'http://localhost:80/index.php/Mysql/mysql_get_bygname' + '/input_table_name/' + input_warehouseid + '/input_gname/' + input_gname;
        } else {
            alert("商品ID和名称不可以全为空！并且仓库名称不得为空！");
            return 0;
        }
        console.log(url0);
        console.log(input_gid + "\n" + input_gid + "\n");
        $.ajax({
            url: url0,
            async: pageYOffset,
            contentType: "application/x-www-form-urlencoded",
            dataType: "json",
            success: function(data) {
                console.log(data);
                data_np = Object.values(data);
                var output = document.getElementById('output');
                var value_np_out = "";
                value_np_out += "<table id='output_table'>" + "<thead>" + "<tr>" + "<th>ID</th><th>商品名称</th><th>商品种类</th><th>商品数量</th><th>商品单价</th><th>商品备注</th>" + "</tr>" + "</thead>" + "<tbody><tr>"
                for (i1 = 0; i1 < data_np.length; i1++) {
                    value_np_out += "<td>" + data_np[i1] + "</td>";
                }
                value_np_out += "</tr></tbody><table>"
                output.innerHTML = value_np_out;
            },
            error: function(err) {
                // 请求失败， err是失败的内容
                print("请求失败");
            },
            complete: function(e) {
                // 不管成功还是失败都会调用这个函数
            }
        })
    }


    //输出所有
    function query_output_everything() {
        $.ajax({
            url: 'http://localhost:80/index.php/Mysql/mysql_get_all/input_table_name/store1',
            // url: 'http://localhost:80/warehouse-test/public/index.php/Mysql/mysql_get_all/input_table_name/store1',
            // http://warehouse-test/
            // data: {
            //     name: 1
            // },
            // method: post,
            async: pageYOffset,
            // 是否异步(同步: 必须等待后台返回数据后程序才会继续往下走， 异步: 发送后不管是否成功都可以继续往下走),
            // beforeSend: 发送到后台前执行的函数， 可以用作校验或给按钮添加样式， 如果用作校验return false;则可以取消本次请求,
            contentType: "application/x-www-form-urlencoded",
            // 默认值: "application/x-www-form-urlencoded"。
            // 发送信息至服务器时内容编码类型,
            dataType: "json",
            //(指定服务器返回的数据类型)
            success: function(data) {
                // 请求成功的函数， data是后台返回的数据， 在这里对数据进行操作
                // console.log(data);
                //转成数组
                data_np = Object.values(data);
                // console.log(data_np.length);
                // console.log(typeof(data_np.length));
                //找到要输出的位置
                var output = document.getElementById('output');
                //初始化输出文本
                var value_np_out = "";
                value_np_out += "<table id='output_table'>" + "<thead>" + "<tr>" + "<th>ID</th><th>商品名称</th><th>商品种类</th><th>商品数量</th><th>商品单价</th><th>商品备注</th>" + "</tr>" + "</thead>" + "<tbody > "
                for (i1 = 0; i1 < data_np.length; i1++) {
                    var value_np = Object.values(data_np[i1])
                    console.log(value_np);
                    value_np_out += "<tr>"
                    for (i2 = 0; i2 < value_np.length; i2++) {
                        value_np_out += "<td>" + value_np[i2] + "</td>";
                    }
                    value_np_out += "</tr>"
                        // output.element.insertAdjacentHTML('afterend', "<tr>" + value_np_out + "</tr>");
                    console.log(value_np_out);
                }
                value_np_out += "</tbody><table>"
                output.innerHTML = value_np_out;
            },
            error: function(err) {
                // 请求失败， err是失败的内容
                print("请求失败");
            },
            complete: function(e) {
                // 不管成功还是失败都会调用这个函数
            }
        })
    }

    function pop_insert_onclick() {
        alert("");
    }
</script>


</html>